<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.min.css">
</head>

<body>
<div class="container-fluid" id="view">
    <div class="row">
        <div class="col-md-6 col-xl-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
            <span class="avatar-md rounded-circle bg-white bg-opacity-25 avatar-box">
              <i class="mdi mdi-link fs-4"></i>
            </span>
                        <span class="fs-4 scroll-numbers" onclick="openEvnStats()">{{d.nginx.connections}}</span>
                    </div>
                    <div class="text-end">当前连接</div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-3">
            <div class="card bg-danger text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
  	        <span class="avatar-md rounded-circle bg-white bg-opacity-25 avatar-box">
              <i class="mdi mdi-link-off fs-4"></i>
            </span>
                        <span class="fs-4 scroll-numbers">{{d.nginx.accept}}</span>
                    </div>
                    <div class="text-end">接受连接</div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
  	        <span class="avatar-md rounded-circle bg-white bg-opacity-25 avatar-box">
              <i class="mdi mdi-swap-vertical fs-4"></i>
            </span>
                        <span class="fs-4 scroll-numbers">{{d.nginx.requests}}</span>
                    </div>
                    <div class="text-end">请求总量</div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-3">
            <div class="card bg-purple text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
  	        <span class="avatar-md rounded-circle bg-white bg-opacity-25 avatar-box">
              <i class="mdi mdi-swap-vertical-bold fs-4"></i>
            </span>
                        <span class="fs-4 scroll-numbers">{{d.nginx.count_request_list.upday_request}}</span>
                    </div>
                    <div class="text-end">昨日请求量</div>
                </div>
            </div>
        </div>

    </div>

    <div class="row">

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        空间使用率
                    </div>
                </div>
                <div class="card-body">
                    <canvas class="js-chartjs-space"></canvas>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        nginx最近请求数
                    </div>
                </div>
                <div class="card-body">
                    <canvas class="js-chartjs-bars"></canvas>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        <a style="color: #212529;" href="javascript:void(0)" onclick="openBasePage('nginx负载情况', 'page/main/nginx-connections.html?date=')">nginx负载情况</a>
                    </div>
                </div>
                <div class="card-body">
                    <canvas class="js-chartjs-lines"></canvas>
                </div>
            </div>
        </div>

    </div>


    <div class="row">

        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <select style="position: absolute;right: 10px; top: 20px;" onchange="onchangeMap(this)"><option value="-1">前1天</option><option value="-2">前2天</option><option value="-3">前3天</option><option value="-4">前4天</option><option value="-5">前5天</option><option value="-6">前6天</option><option value="-7">前7天</option></select>
                    <div class="table-responsive">
                        <iframe id="iframe-scatter" width="100%" style="min-height: 700px;" src="page/main/map-scatter.html"></iframe>
                    </div>
                </div>
            </div>
        </div>

    </div>

<!--    <div class="row">-->

<!--        <div class="col-lg-12">-->
<!--            <div class="card">-->
<!--                <header class="card-header"><div class="card-title">当前环境</div></header>-->
<!--                <div class="card-body">-->
<!--                    <div class="table-responsive">-->
<!--                        <table class="table table-hover">-->
<!--                            <thead>-->
<!--                            <tr>-->
<!--                                <th>#</th>-->
<!--                                <th>参数</th>-->
<!--                                <th>值</th>-->
<!--                            </tr>-->
<!--                            </thead>-->
<!--                            <tbody id="stats">-->
<!--                            </tbody>-->
<!--                        </table>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->

<!--    </div>-->

</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/chart.min.js"></script>
<!-- 数字动态滚动增加效果 -->
<!--<script type="text/javascript" src="js/scroll-numbers.js"></script>-->
<!--引入chart插件js-->
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript" src="js/layer/layui.js"></script>
<script type="text/javascript">
    ready(function() {
        var viewHtml = '';
        var viewData = null;
        layui.use(['zhanshop'], function(){
            var $ = layui.$;
            viewHtml = $("#view").html();
            var zhanshop = layui.zhanshop;

            window.loadView = function (){
                zhanshop.view(API_ADDRESS + apiUrlMain, '#view', function(data){
                    viewData = data;
                    // var ipRequstHtml = "";
                    // var lineNumber = 1;
                    // for(var requestip in data.nginx.count_request_list.top1000){
                    //     var requestipInfo = data.nginx.count_request_list.top1000[requestip];
                    //     ipRequstHtml += '<tr><td>'+requestip+'</td><td>'+requestipInfo[1]+'</td><td>'+requestipInfo[0]+'</td></tr>';
                    //     lineNumber++;
                    // }
                    // document.getElementById("iporder").innerHTML = ipRequstHtml;


                    // var uriRequstHtml = "";
                    // var lineNumber = 1;
                    // for(var uri in data.nginx.count_request_list.uri1000){
                    //     var requesturiCount = data.nginx.count_request_list.uri1000[uri];
                    //     uriRequstHtml += '<tr><td>'+lineNumber+'</td><td>'+uri+'</td><td>'+requesturiCount+'</td></tr>';
                    //     lineNumber++;
                    // }
                    // document.getElementById("uriorder").innerHTML = uriRequstHtml;

                    $(document).ready(function(e) {
                        var $dashChartSpace = jQuery('.js-chartjs-space')[0].getContext('2d');
                        var $dashChartBarsCnt = jQuery('.js-chartjs-bars')[0].getContext('2d');
                        var $dashChartLinesCnt = jQuery('.js-chartjs-lines')[0].getContext('2d');

                        var $dashChartSpaceData = {
                            labels: data.space.disk.time,
                            datasets: [
                                {
                                    label: 'disk使用率',
                                    borderWidth: 1,
                                    borderColor: 'rgba(0, 0, 0, 0)',
                                    backgroundColor: 'rgba(0, 123, 255,0.5)',
                                    hoverBackgroundColor: "rgba(0, 123, 255, 0.7)",
                                    hoverBorderColor: "rgba(0, 0, 0, 0)",
                                    data: data.space.disk.value,
                                    backgroundColor: 'rgba(0, 123, 255,0.5)',
                                    borderColor: '#007bff',
                                    borderWidth: 1,
                                    fill: false,
                                    lineTension: 0.5
                                },
                                // {
                                //     label: 'redis使用率',
                                //     borderWidth: 1,
                                //     borderColor: 'rgba(0, 0, 0, 0)',
                                //     backgroundColor: 'rgba(0, 255, 0,0.5)',
                                //     hoverBackgroundColor: "rgba(0, 123, 255, 0.7)",
                                //     hoverBorderColor: "rgba(0, 0, 0, 0)",
                                //     data: data.space.redis.value,
                                //     backgroundColor: 'rgba(0, 255, 0,0.5)',
                                //     borderColor: '#16b777',
                                //     borderWidth: 1,
                                //     fill: false,
                                //     lineTension: 0.5
                                // },
                                // {
                                //     label: 'mysql使用率',
                                //     borderWidth: 1,
                                //     borderColor: 'rgba(0, 0, 0, 0)',
                                //     backgroundColor: 'rgba(255, 0, 0,0.5)',
                                //     hoverBackgroundColor: "rgba(0, 123, 255, 0.7)",
                                //     hoverBorderColor: "rgba(0, 0, 0, 0)",
                                //     data: data.space.mysql.value,
                                //     backgroundColor: 'rgba(255, 0, 0,0.5)',
                                //     borderColor: '#f00',
                                //     borderWidth: 1,
                                //     fill: false,
                                //     lineTension: 0.5
                                // },
                            ]
                        };


                        var $dashChartBarsData = {
                            labels: data.nginx.count_request_list.time,
                            datasets: [{
                                label: '请求数',
                                borderWidth: 1,
                                borderColor: 'rgba(0, 0, 0, 0)',
                                backgroundColor: 'rgba(0, 123, 255,0.5)',
                                hoverBackgroundColor: "rgba(0, 123, 255, 0.7)",
                                hoverBorderColor: "rgba(0, 0, 0, 0)",
                                data: data.nginx.count_request_list.value
                            },
                                {
                                    label: '访客数',
                                    borderWidth: 1,
                                    borderColor: 'rgba(0, 0, 0, 0)',
                                    backgroundColor: 'rgba(0, 255, 0,0.5)',
                                    hoverBackgroundColor: "rgba(0, 123, 255, 0.7)",
                                    hoverBorderColor: "rgba(0, 0, 0, 0)",
                                    data: data.nginx.count_visitor_list.value,
                                    backgroundColor: 'rgba(0, 255, 0,0.5)',
                                    borderColor: '#16b777',
                                    borderWidth: 1,
                                    fill: false,
                                    lineTension: 0.5
                                }
                            ]
                        };
                        var $dashChartLinesData = {
                            labels: data.nginx.count_connections_list.time,
                            datasets: [{
                                label: '连接数',
                                data: data.nginx.count_connections_list.value,
                                borderColor: '#007bff',
                                backgroundColor: 'rgba(0, 123, 255, 0.175)',
                                borderWidth: 1,
                                fill: false,
                                lineTension: 0.5
                            }]
                        };

                        new Chart($dashChartSpace, {
                            type: 'line',
                            data: $dashChartSpaceData
                        });

                        new Chart($dashChartBarsCnt, {
                            type: 'bar',
                            data: $dashChartBarsData
                        });

                        var myLineChart = new Chart($dashChartLinesCnt, {
                            type: 'line',
                            data: $dashChartLinesData,
                        });
                    });
                    var num = 0;
                    var statsHtml = "";
                    for(var i in data.stats){
                        statsHtml+= "<tr>\n" +
                            "                <td>"+num+"</td>\n" +
                            "                <td>"+i+"</td>\n" +
                            "                <td>"+data.stats[i]+"</td>\n" +
                            "              </tr>";
                        num++;
                    }
                    $("#stats").html(statsHtml);

                }, "GET", '', {}, false);
            }

            loadView();

            // 设置一个1000毫秒后执行的定时任务
            // setTimeout(function() {
            //     $("#view").html(viewHtml);
            //     loadView();
            // }, 60000);

            window.onchangeMap = function (obj){
                $("#iframe-scatter").attr("src", 'page/main/map-scatter.html?date='+obj.value)
            }
            window.openEvnStats = function (){
                alert(JSON.stringify(viewData.stats));
            }
        })
    });

</script>
</body>
</html>